<template>
    <div style="display: flex;background-color: transparent; margin-left: 90px; height:800px;" >

        <div>
            <el-table :data="ASInfo"  max-height="550" style="background-color: transparent;padding:170px;width:1520px;margin-left: -140px;" stripe :border="true"  >
                <el-table-column fixd prop="CName" label="社团名称" width="90" > </el-table-column>
                <el-table-column prop="year" label="年份" width="80"> </el-table-column>
                <el-table-column prop="CPName" label="年检主题" width="110"> </el-table-column>
                <el-table-column prop="issueTime" label="发布时间" width="180">
                    <template #default="{ row }">
                <span>{{this.getFormatTime(row.issueTime)}}</span>
                </template>
                </el-table-column>

                <el-table-column label="提交状态" width="80">
                <template #default="{ row }">
                    <span v-if="row.state === -1">未提交</span>
                    <!-- <span v-else-if="row.state === 1">已提交</span> -->
                    <span v-else-if="row.state === 0">审核中</span>
                    <span v-else-if="row.state === 1">审核中</span>
                    <span v-else-if="row.state === 2">被驳回</span>
                    <span v-else-if="row.state === 3">已取消</span>
                    <span v-else>未知状态</span>
                </template>
                </el-table-column>
                
                <el-table-column label="年检文件下载" width="200">
                <template #default="{ row }">
                    <div v-if="row.FileID !== 0">
                    <el-icon><i class="el-icon-document"></i></el-icon>
                    <a :href="row.FileUrl">{{ row.FileName }}</a>
                    </div>
                    <div v-else>
                    暂无文件
                    </div>
                </template>
                </el-table-column>

                <el-table-column label="上传年检文件" width="320">
                    <template #default="{ row, $index }">
                        <!-- 在这里 $index 表示当前行的索引 -->
                        <template v-if="row.state === 0">
                            文件已提交
                        </template>
                        <div class="file-upload-container">
                            <input size="small" type="file" accept=".docx, .pdf, .zip" @change="handleASFileChange($event, $index)" />
                            <el-button  @click="handleASFileUpload(row)">上传</el-button>
                        </div>
                    </template>
                </el-table-column>

            </el-table>
        <!-- </div> -->

        <!-- <div> -->
            <el-table :data="CEInfo"   max-height="550" style="background-color: transparent;width:1490px;padding:170px;margin-left: -140px; " stripe :border="true"   >
                <el-table-column fixd prop="CName" label="社团名称" width="90" > </el-table-column>
                <el-table-column prop="year" label="年份" width="80"> </el-table-column>
                <el-table-column prop="CEName" label="评优主题" width="110"> </el-table-column>
                <el-table-column prop="issueTime" label="发布时间" width="180">
                    <template #default="{ row }">
                <span>{{this.getFormatTime(row.issueTime)}}</span>
                </template>
                </el-table-column>

                <el-table-column label="提交状态" width="80">
                <template #default="{ row }">
                    <span v-if="row.state === -1">未提交</span>
                    <!-- <span v-else-if="row.state === 1">已提交</span> -->
                    <span v-else-if="row.state === 0">审核中</span>
                    <span v-else-if="row.state === 1">审核中</span>
                    <span v-else-if="row.state === 2">被驳回</span>
                    <span v-else-if="row.state === 3">已取消</span>
                    <span v-else>未知状态</span>
                </template>
                </el-table-column>
                
                <el-table-column label="评优文件下载" width="200">
                <template #default="{ row }">
                    <div v-if="row.FileID !== 0">
                    <el-icon><i class="el-icon-document"></i></el-icon>
                    <a :href="row.FileUrl">{{ row.FileName }}</a>
                    </div>
                    <div v-else>
                    暂无文件
                    </div>
                </template>
                </el-table-column>

                <el-table-column label="上传评优文件" width="320">
                    <template #default="{ row, $index }">
                        <!-- 在这里 $index 表示当前行的索引 -->
                        <template v-if="row.state === 0">
                            文件已提交
                        </template>
                        <div class="file-upload-container">
                            <input size="small" type="file" accept=".docx, .pdf, .zip" @change="handleCEFileChange($event, $index)" />
                            <el-button  @click="handleCEFileUpload(row)">上传</el-button>
                        </div>
                    </template>
                </el-table-column>

            </el-table>
        </div>

    </div>

</template>

<script>
import axios from 'axios';
import { ElMessage } from 'element-plus';

export default {
    data(){
        return{
            ASInfo:[],
            CEInfo:[],
            selectedASFile: [], // 初始化为一个空数组
            selectedCEFile: [],
            // as_clubInfo:[],
            // ce_clubInfo:[],
            // ass:[],
            // ces:[],
            // ce_ratio:[],
            // as_ratio:[],
            // as_tableData:[],
            // ce_tableData:[],
            // asclubstableData:[],
            // ceclubstableData:[],
            // as_Names:[],
            // ce_Names:[],
            // ce_files:[],
            // as_files:[],
            // ASdetailsDialogVisible:false,
            // CEdetailsDialogVisible:false,
            // ASform:{
            //     year:'',
            //     theme:'',
            // },
            // CEform:{
            //     year:'',
            //     theme:'',
            // },
        }
    },

    methods:{
        getFormatTime(time) {
            let date = new Date(time); 
            let year = date.getFullYear();
            let month = (date.getMonth() + 1).toString().padStart(2, '0'); 
            let day = date.getDate().toString().padStart(2, '0');
            let hours = date.getHours().toString().padStart(2, '0');
            let minutes = date.getMinutes().toString().padStart(2, '0');
            let seconds = date.getSeconds().toString().padStart(2, '0');

            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        },

        //获取当前时间
        getCurrentDateTime() {
            const now = new Date();
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以要加1，并且保证两位数
            const day = String(now.getDate()).padStart(2, '0');
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');

            const formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

            return formattedDateTime;
            },



        handleASFileChange(event,index) {
            if (!this.selectedASFile[index]) {
            this.selectedASFile[index] = null; // 或者初始化为其他合适的值，比如 {}
            }
            this.selectedASFile[index] = event.target.files[0];
        },
        
        handleASFileUpload(row,index){
            const currentTime = this.getCurrentDateTime();
            const applyAS = new FormData();
            applyAS.append('uid',this.$store.state.userinfo.account)
            applyAS.append('applyTime',currentTime)
            applyAS.append('cid',row.cid)
            applyAS.append('cpid',row.CPid)
            applyAS.append('file',this.selectedASFile[index])
            axios.post('api/manager/uploadASFile', applyAS)
            .then(response => {
                ElMessage.success("您已成功提交年检文件！");
              console.log('Form submitted successfully:', response);
              
            })
            .catch(error => {
                ElMessage.error("未选择文件，提交年检文件失败！");
                console.error('Error submitting form:', error);
            });

        },

        
        handleCEFileChange(event,index) {
            if (!this.selectedASFile[index]) {
            this.selectedASFile[index] = null; // 或者初始化为其他合适的值，比如 {}
            }
            this.selectedASFile[index] = event.target.files[0];
        },
        
        handleCEFileUpload(row,index){
            const currentTime = this.getCurrentDateTime();
            const applyCE = new FormData();
            applyCE.append('uid',21311311)
            applyCE.append('applyTime',currentTime)
            applyCE.append('cid',row.cid)
            applyCE.append('CEid',row.CEid)
            applyCE.append('file',this.selectedASFile[index])
            axios.post('api/manager/uploadCEFile', applyCE)
            .then(response => {
                ElMessage.success("您已成功提交年检文件！");
              console.log('Form submitted successfully:', response);
              
            })
            .catch(error => {
                ElMessage.error("未选择文件，提交年检文件失败！");
                console.error('Error submitting form:', error);
            });

        },






    },

    //获得年检评优数据
    mounted() {
        const params = new URLSearchParams();
        params.append('uid', 21311311);

        axios.get('http://localhost:8080/api/manager/GetManageASCE', { params })
        .then(response => {
            console.log(response)
            this.ASInfo = response.data.data.allASApply;
            console.log(this.ASInfo)
            this.CEInfo = response.data.data.allCEApply;
        })
        .catch(error => {
            console.error('Error fetching info:', error);
        });
    }
}
</script>

<style>
.table-cell {
  max-height:20px; /* 单元格的最大高度 */
  overflow: hidden; /* 溢出的内容隐藏 */
  white-space: nowrap; /* 文本不换行 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}

/* 如果需要多行省略号，可以使用以下CSS */
.ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 显示的行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.file-input {
    background-color: #e1f5fe; /* 淡蓝色背景 */
    padding: 10px;
    border: 1px solid #90caf9; /* 浅蓝色边框 */
    border-radius: 5px;
    color: #1976d2; /* 主题色文本颜色 */
    outline: none; /* 去除默认的聚焦边框 */
    cursor: pointer; /* 鼠标指针样式 */
    transition: border-color 0.3s ease; /* 边框颜色变化动画 */
}

.file-input:hover,
.file-input:focus {
    border-color: #42a5f5; /* 鼠标悬停或聚焦时的边框颜色 */
}

.file-upload-container {
    display: flex; /* 使用 flex 布局 */
    align-items: center; /* 垂直居中对齐 */
}
</style>